<template>
  <div v-loading="fullLoading" element-loading-text="加载中">
    <div class="bgc-default pad-20">
      <div class="bg-color-white pad-20">
        <el-steps :active="activeNum" class="step-bar mar-t-30 mar-b-30" finish-status="success" align-center>
          <el-step title="买家下单"></el-step>
          <el-step :title="orderInfo.enterprisePayFlag == 1 ? '企业付款' : '买家付款'"></el-step>
          <el-step v-if="isStorePickUpOrder" :title="'待买家上门提货'"></el-step>
          <el-step v-else-if="isStoreHomeDeliveryOrder" :title="'配送至卖家'"></el-step>
          <el-step :title="'买家收货'"></el-step>
          <el-step title="订单完成"></el-step>
        </el-steps>
      </div>
    </div>
    <div class="bgc-default pad-l-20 pad-r-20 pad-b-20">
      <div>
        <el-row :gutter="20">
          <!-- 买家信息 -->
          <el-col :span="showBox === 1 ? 8 : 6">
            <div class="bg-color-white">
              <div class="title-top flex v-align-c flex-center height-44 pad-l-27 pad-r-27">
                <div class="flex-item font-w font-16">基本信息</div>
              </div>
              <div class="pad-t-15 pad-b-15 pad-l-30 pad-r-10 mar-l-30 mar-r-10 buyer-info-line">
                <div class="flex">
                  <div class="font-color-9 width-72">订单编号：</div>
                  <div class="flex-item">{{ orderInfo.orderNo ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">创建时间：</div>
                  <div class="flex-item">{{ orderInfo.createTime ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">支付时间：</div>
                  <div class="flex-item">{{ orderInfo.payTime ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">付款方式：</div>
                  <div class="flex-item">{{ dict.payType[orderInfo.payType] ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">顾客名称：</div>
                  <div class="flex-item">{{ orderInfo.customerNickname ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">顾客电话：</div>
                  <div class="flex-item">{{ orderInfo.customerPhone ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">配送方式：</div>
                  <div class="flex-item">
                    {{ dict.deliveryType[orderInfo.deliveryType] ||  '&nbsp;' }}
                  </div>
                </div>
                <div class="flex" v-if="isStorePickUpOrder">
                  <div class="font-color-9 width-72">提货地点：</div>
                  <div class="flex-item">
                    {{ orderInfo.memberTakeAddress  ||  '&nbsp;' }}
                  </div>
                </div>
                <div class="flex" v-else>
                  <div class="font-color-9 width-72">收货地址：</div>
                  <div class="flex-item">
                    {{ orderInfo.customerFullAddress  ||  '&nbsp;' }}
                    <a href="javascript:;" @click="doCopy(orderInfo, $event)"><span
                        class="mar-l-10 font-blue">复制</span></a>
                  </div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">备注留言：</div>
                  <div class="flex-item">{{ orderInfo.customerComment ||  '&nbsp;' }}</div>
                </div>
              </div>
            </div>
          </el-col>
          <!-- 订单信息 -->
          <el-col :span="showBox === 1 ? 8 : 6">
            <div class="bg-color-white">
              <div class="title-top flex v-align-c flex-center height-44 pad-l-27 pad-r-27">
                <div class="flex-item font-w font-16">订单信息</div>
              </div>
              <div class="pad-t-15 pad-b-15 pad-l-30 pad-r-10 mar-l-30 mar-r-10 buyer-info-line">
                <div class="flex">
                  <div class="font-color-9 width-72">订单状态：</div>
                  <div class="flex-item">
                    <div class="mar-t--15 mar-b--5">
                      <b class="font-26" :class="orderInfo.orderStatusColor">
                        <span>{{orderInfo.orderStatusText}}</span>
                      </b>
                    </div>
                  </div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">订单类型：</div>
                  <div class="flex-item" v-if="isStoreHomeDeliveryOrder">到家配送</div>
                  <div class="flex-item" v-if="isStorePickUpOrder">门店自提</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">配送单号：</div>
                  <div class="flex-item">{{ orderInfo.deliveryNo ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div v-if="isStoreHomeDeliveryOrder && orderInfo.orderStatus === 1">
                    <div class="font-color-9 width-100">预计发货时间：</div>
                  </div>
                  <div v-else>
                    <div class="font-color-9 width-75">发货时间：</div>
                  </div>
                  <div class="flex-item">{{ orderInfo.deliveryTime ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-100">
                    {{isStorePickUpOrder ? '顾客提货时间：' : '顾客收货时间：'}}
                  </div>
                  <div class="flex-item">
                    {{ isStorePickUpOrder ? orderInfo.deliveryTime : orderInfo.receivedTime}}
                  </div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-100">订单完成时间：</div>
                  <div class="flex-item">{{ orderInfo.completeTime ||  '&nbsp;' }}</div>
                </div>
              </div>
            </div>
          </el-col>
          <!-- 团长/门店信息 -->
          <el-col :span="showBox === 1 ? 8 : 6">
            <div class="bg-color-white">
              <div class="title-top flex v-align-c flex-center height-44 pad-l-27 pad-r-27">
                <div class="flex-item font-w font-16">门店信息</div>
              </div>
              <div class="pad-t-15 pad-b-15 pad-l-30 pad-r-10 mar-l-30 mar-r-10 buyer-info-line">
                <div class="flex v-align-c cursor-p"
                  v-if="orderInfo.commanderId && orderInfo.commanderId > 0 && orderInfo.shopMember">
                  <label><img :src="orderInfo.shopMember.avatar" class="user-avatar cursor-p"
                      v-if="orderInfo.shopMember.avatar"></label>
                  <div class="font-14 pad-l-10">
                    <div><span class="font-color-9">昵称：</span>{{orderInfo.shopMember.nickname}}
                    </div>
                    <div><span class="font-color-9">手机：</span>{{orderInfo.shopMember.phone}}
                    </div>
                  </div>
                </div>
                <div class="flex v-align-c cursor-p"
                  v-if="(!orderInfo.commanderId || orderInfo.commanderId <= 0) && orderInfo.memberStore">
                  <label><img :src="orderInfo.memberStore.storeImage" class="user-avatar cursor-p"
                      v-if="orderInfo.memberStore.storeImage"></label>
                  <div class="font-14 pad-l-10">
                    <div><span class="font-color-9">名称：</span>{{orderInfo.memberStore.storeName}}
                    </div>
                    <div><span class="font-color-9">账号：</span>{{orderInfo.memberStore.storePhone}}
                    </div>
                  </div>
                </div>
                <div class="flex" v-if="orderInfo.memberCommission && orderInfo.memberCommission > 0">
                  <div class="font-color-9 width-90">获得佣金：</div>
                  <div class="flex-item">{{orderInfo.memberCommission}}</div>
                </div>
              </div>
            </div>
          </el-col>
          <!-- 主播信息 -->
          <el-col :span="showBox === 1 ? 8 : 6"
            v-if="orderInfo.anchorMember && orderInfo.anchorMember.memberId && orderInfo.samplePartnerId===null">
            <div class="bg-color-white">
              <div class="title-top flex v-align-c flex-center height-44 pad-l-27 pad-r-27">
                <div class="flex-item font-w font-16">主播信息 </div>
              </div>
              <div class="pad-t-15 pad-b-15 pad-l-30 pad-r-10 mar-l-30 mar-r-10 buyer-info-line">
                <div class="flex">
                  <div class="font-color-9 width-72">头像：</div>
                  <div class="flex-item"><img :src="orderInfo.anchorMember.avatar" height="50px">
                  </div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">昵称：</div>
                  <div class="flex-item">{{ orderInfo.anchorMember.nickname ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">联系电话：</div>
                  <div class="flex-item">{{ orderInfo.anchorMember.phone ||  '&nbsp;' }}</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="bgc-default pad-l-20 pad-r-20 pad-b-20">
      <div class="bg-color-white pad-l-20 pad-r-20 pad-b-20 pad-t-10">
        <!-- 商品信息 -->
        <div class="tabs-box">
          <el-tabs value="goodsInfo">
            <el-tab-pane label="商品信息" name="goodsInfo">
              <el-table :data="orderGoodsList">
                <el-table-column min-width="280px" label="订单信息">
                  <template slot-scope="scope">
                    <div class="flex v-align-c cursor-p">
                      <label v-if="scope.row.goodsImageUrl"><img :src="scope.row.goodsImageUrl"
                          class="t-goods-pic"></label>
                      <div class="font-12 pad-l-10 line-2">{{scope.row.goodsTitle}}
                        <div class="font-12 font-w font-orange" v-if="scope.row.promotionTitle">
                          活动：{{scope.row.promotionTitle}}</div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="180px" label="规格" prop="skuDetail" align="left">
                  <template slot-scope="scope">
                    <div class="font-blue">
                      {{ scope.row.skuDetail ? scope.row.skuDetail : '无' }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column v-if="orderInfo.enterprisePayFlag == 1" width="135px" label="待付运费" align="center">
                  <template slot-scope="scope">
                    <div>￥{{ scope.row.freight }}</div>
                  </template>
                </el-table-column>

                <el-table-column width="120px" label="商品单价" prop="goodsPrice" align="right">
                </el-table-column>

                <el-table-column v-if="orderInfo.sellApartOrderId != null" width="120px" label="销方商品单价"
                  prop="sellGoodsPrice" align="right">
                </el-table-column>

                <el-table-column width="120px" label="供应价" align="center">
                  <template slot-scope="scope">
                    <div>
                      <span v-if="scope.row.supplyOrderGoodsId">￥{{ scope.row.supplyAlliancePrice }}</span>
                      <span v-else>{{ scope.row.goodsSupplyPrice ? '￥' + scope.row.goodsSupplyPrice : '' }}</span>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column width="135px" label="数量">
                  <template slot-scope="scope">
                    <div>商品数：{{ scope.row.goodsNum }}</div>
                    <div>发货数：{{ scope.row.deliveryNum }}</div>
                    <div>售后数：{{ scope.row.afterSaleGoodsNum }}</div>
                    <div>截停数：{{ scope.row.stopNum }}</div>
                  </template>
                </el-table-column>
                <el-table-column width="135px" label="售后状态">
                  <template slot-scope="scope">
                    <div>
                      {{ orderInfo.orderType == 33 || orderInfo.orderType == 34
                      ? dict.platformAfterSaleStatus[scope.row.platformAfterSaleStatus] : dict.afterSaleStatus[scope.row.afterSaleStatus]}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="135px" label="金额" prop="goodsTotalPrice" align="right">
                </el-table-column>
                <el-table-column width="160px" label="来源" align="center">
                  <template slot-scope="scope">
                    <div>{{ scope.row.supplierName || dict.source[scope.row.source] || '总部' }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="160px" label="发货仓" prop="warehouseName" align="center">
                </el-table-column>
                <el-table-column v-if="orderInfo.enterprisePayFlag == 1" width="160px" label="异常" prop="exceptionReason"
                  align="left">
                </el-table-column>
              </el-table>
              <table class="table-foot">
                <tr v-if="orderInfo.couponReduceAmount">
                  <td class="left">优惠金额：</td>
                  <td>￥{{ orderInfo.couponReduceAmount }}</td>
                </tr>
                <tr>
                  <td class="left">商品小计：</td>
                  <td>￥{{ orderInfo.goodsAmount ||  '&nbsp;' }}</td>
                </tr>
                <tr v-if="orderInfo.deliveryType && orderInfo.deliveryType !== 5">
                  <td class="left">运费：</td>
                  <td>￥{{ orderInfo.freight }}</td>
                </tr>
                <tr v-if="orderInfo.deliveryType && orderInfo.deliveryType === 5">
                  <td class="left">配送费：</td>
                  <td>￥{{ orderInfo.deliveryFee }}</td>
                </tr>
                <tr>
                  <td class="left">订单合计：</td>
                  <td>￥{{ orderInfo.orderPrice }}</td>
                </tr>
                <tr v-if="orderInfo.orderType == 30">
                  <td class="left">分销佣金：</td>
                  <td>￥{{ (orderInfo.memberCommission * 1 + orderInfo.shareCommission * 1).toFixed(2) }}
                  </td>
                </tr>
                <tr v-if="orderInfo.sellApartOrderId">
                  <td class="left">平台佣金：</td>
                  <td>￥{{ orderInfo.supplyAllianceCommission ? orderInfo.supplyAllianceCommission : 0}}
                  </td>
                </tr>
                <tr class="font-22">
                  <td class="left font-black"><b>实际收入：</b></td>
                  <!-- 批发订单为线下支付不扣除易宝手续费 显示金额为订单金额 -->
                  <td class="font-red" v-if="orderInfo.payType == 5">
                    <b>￥{{ orderInfo.orderPrice }}</b>
                  </td>
                  <td class="font-red" v-else><b>￥{{ orderInfo.enterpriseAmount }}</b></td>
                </tr>
                <tr class="font-22" v-if="orderInfo.enterprisePayFlag == 1">
                  <td class="left font-black">待付货款：</td>
                  <td class="font-red"><b>￥{{ orderInfo.orderPriceToThird }}</b></td>
                </tr>
              </table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getByEnterpriseId
  } from '@/api/user/enterprise'
  import clipboard from '@/utils/clipboard'

  export default {
    components: {
    },
    props: {
      orderData: {
        type: Object,
        required: true
      },
      dictData: {
        type: Object,
        required: true
      }
    },
    watch: {
      orderData: {
        handler(nv, ov) {
          this.orderInfo = nv
          this.initOrderInfo()
        },
        immediate: true
      },
      dictData: {
        handler(nv, ov) {
          this.dict = nv
        },
        immediate: true
      }
    },
    data() {
      return {
        // 企业配置
        enterpriseConfig: {},
        // 订单对象
        orderInfo: {
          orderStatus: '',
          orderStatusColor: 'font-pink',
          shopMember: {},
          shareMember: {},
          anchorMember: {}
        },
        orderGoods: {
          orderGoodsId: ''
        },
        orderGoodsList: [],
        orderLogList: [],
        // 数据字典
        dict: {
          orderStatus: {},
          afterSaleStatus: {},
          platformAfterSaleStatus: {},
          orderType: {},
          stopStatus: {},
          payType: {},
          deliveryType: {},
          source: {}
        },
        fullLoading: false,
        activeNum: 1,
        showBox: 1,
        isStorePockUpOrder: ''
      }
    },
    created() {
      // 获取企业配置
      getByEnterpriseId(this.getEnterpriseId()).then(response => {
        this.enterpriseConfig = response.data
      })
    },
    computed: {
      // 到家自提订单
      isStorePickUpOrder() {
        return this.orderInfo && this.orderInfo.deliveryType ? this
          .orderInfo.deliveryType === 4 : false
      },
      // 到家配送
      isStoreHomeDeliveryOrder() {
        return this.orderInfo && this.orderInfo.deliveryType ? this
          .orderInfo.deliveryType === 5 : false
      }
    },
    methods: {
      // 复制事件
      doCopy(order, event) {
        const text = this.getVersionType() !== 5 ? order.customerFullAddress : order.memberTakeAddress
        clipboard(text, event)
      },
      // 初始化
      initOrderInfo() {
        this.orderInfo = this.orderData
        this.orderGoodsList = this.orderInfo.orderGoodsList
        this.orderLogList = this.orderInfo.orderLogList
        this.activeNum = this.orderInfo.activeNum
        this.showBox = this.orderInfo.showBox
      },
      // 返回事件
      doBack() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="less" scoped>
  .table-foot {
    width: 100%;
    border-bottom: 1px solid #EBEEF5;
    padding: 10px 0;

    .left {
      width: 93%;
      text-align: right;
    }
  }

  /deep/ .action-table.el-table--medium td {
    padding: 32px 0;
  }

  .title-top {
    border-bottom: #eff1f6 1px solid;
  }

  .buyer-info-line {
    line-height: 2.2;
    height: 300px;
    height: auto !important;
    min-height: 300px;
    overflow: visible;
  }

  .user-avatar {
    width: 65px;
    height: 65px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
</style>
